<template>
	<view class="add">
		<view class="box">
			<view class="box-item">
				<view class="box-item-left">
					<text class="box-item-left-text">收货人</text>
					<input class="inputClass" type="text" placeholder="填写收货人" v-model="name" placeholder-color="#999999">
				</view>
				<view class="box-item-right">
					
				</view>
            </view>
			<view class="box-item">
				<view class="box-item-left">
					<text class="box-item-left-text">联系电话</text>
					<input class="inputClass" type="number" maxlength="11" placeholder="填写收货人手机号码" v-model="mobile" placeholder-color="#999999">
				</view>
				<view class="box-item-right">
					
				</view>
			</view>
			<view class="box-item" @click="handlearea">
				<view class="box-item-left">
					<text class="box-item-left-text">选择地区</text>
					<text class="box-item-left-text1" v-if="province == ''">选择收货地址（省、市、区）</text>
					<text class="box-item-left-text1" v-if="province">{{province}}  {{city}}  {{area}}</text>
				</view>
				<image class="box-item-image" src="../../static/xiayibu@2x.png" mode=""></image>
			</view>
			<view class="box-item">
				<view class="box-item-left">
					<text class="box-item-left-text">详细地址</text>
					<!-- <text class="box-item-left-text1" v-if="addressInfo == ''">例如街道、门牌号、小区、楼栋号、单元室等</text>
					<text class="box-item-left-text1" v-else>{{addressInfo.address}}</text> -->
					<input class="inputClass" type="text"  placeholder="例如街道、小区、楼栋号、门牌号等" v-model="address" placeholder-color="#999999">
				</view>
				<!-- <image class="box-item-image" src="../../static/position@2x.png" mode=""></image> -->
				<view class="box-item-right">
					
				</view>
			</view>
			<view class="box-item">
				<view class="box-item-left">
					<text class="box-item-left-text2">设为默认地址</text>
				</view>
				<image @click="handleDefault(1)" v-if="isDefault==0" class="box-item-image1" src="../../static/xz_1@2x.png" mode=""></image>
				<image @click="handleDefault(0)"  v-if="isDefault==1" class="box-item-image1" src="../../static/xz_2@2x.png" mode=""></image>
			</view>
		</view>
		<view class="box-btn">
			<view class="btn" @click="handleAdd">
				保存
			</view>
		</view>
		
		<u-select v-model="show" mode="mutil-column-auto" :list="areaList" @confirm="confirm" confirm-color="#333333"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				name:'',
				isDefault:0,
				addressInfo:'',
				areaList:[],
				address:'',
				areaId:'',
				area:'',
				cityId:'',
				city:'',
				mobile:'',
				name:'',
				provinceId:'',
				province:'',
				share:uni.getStorageSync('share')
			}
		},
		onLoad() {
			this.getAllList()
		},
		onShow() {
		    // 移除全局自定义事件监听器
		    uni.$off('chooseAddress');
		    // 监听全局的自定义事件
		    uni.$once('chooseAddress', data => {
		        if (data) {
		        	console.log(data)
					this.addressInfo = data
		        }
		    })
		},
		methods: {
			//区域列表
			async getAllList(){
				const res = await this.$u.api.getAllList()
				res.data.forEach(v=>{
					v.children.forEach(a=>{
						if (a.children.length == 0) {
							delete a.children
						}
						a.children.forEach(b=>{
							if (b.children.length == 0) {
								delete b.children
							}
						})
					})
				})
				this.areaList = res.data
				console.log(this.areaList)
			},
			//选择地区
			handlearea(){
				this.show = true
			},
			//选择省市区
			confirm(data){
				console.log(data)
				this.province = data[0].label
				this.provinceId = data[0].value
				this.city = data[1].label
				this.cityId = data[1].value
				this.area = data[2].label
				this.areaId = data[2].value
			},
			//选择是否默认
			handleDefault(data){
				this.isDefault = data
			},
			
			//选择位置
			handleweizhi(){
				uni.navigateTo({
					url:'/pages/xuanzeweizhi/xuanzeweizhi'
				})
			},
			
			//保存
			async handleAdd(){
				const params = {
					address:this.address,
					areaId:this.areaId,
					cityId:this.cityId,
					isDefault:this.isDefault,
					mobile:this.mobile,
					name:this.name,
					provinceId:this.provinceId,
					id:null
				}
				const res = await this.$u.api.saveOrUpd(params)
				this.$u.toast(res.msg)
				if (res.code == 0) {
					setTimeout(()=>{
						const data = 0
						uni.$emit('refreshList', data)
						uni.navigateBack({
							delta: 1
						})
					},1000)
				}
			}
		}
	}
</script>
<style>
	page{
		background: white;
	}
</style>
<style scoped lang="scss">
    .box{
		padding: 0rpx 28rpx;
	}
	.box-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 0rpx;
        border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.box-item-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-item-left-text{
		width: 112rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
		margin-right: 46rpx;
	}
	.box-item-left-text1{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
		flex: 1;
	}
	.box-item-left input{
		width:  500rpx;
	}
	.inputClass{
		
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}
	.box-item-image{
		width: 48rpx;
		height: 48rpx;
		margin-left: 36rpx;
	}
	.box-item-left-text2{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.box-item-image1{
		width: 36rpx;
		height: 36rpx;
	}
	.box-btn{
		width: 750rpx;
		height: 188rpx;
		padding: 16rpx 52rpx 0rpx 52rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.btn{
		width: 646rpx;
		height: 88rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		// border-radius: 10px 10px 10px 10px;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
</style>
